$(function () {
  GradeOption();
  GradeTrend();
  GradeMap();
  EvaluateOption();
});

function GradeOption() {
  let data = [
    {name: "AAA级", value: "0"},
    {name: "AA级", value: "0"},
    {name: "A级", value: "0"},
    {name: "B级", value: "0"},
    {name: "C级", value: "0"}
  ];
  let total = 0;
  data.forEach(function (item) {
    total += parseInt(item.value)
  });
  let myChart = echarts.init(document.getElementById("gradeOption"));
  myChart.setOption({
    title: [{
      text: "全疆信用等级占比",
      left: 20,
      top: 24,
      textStyle: {
        color: "#000000",
        fontSize: 15,
        fontWeight: "normal",
      },
    }, {
      text: "{a|全合肥企业总数}\n{b|" + (total == 0 ? 1 : total) + "家}",
      left: 20,
      top: "center",
      textStyle: {
        color: "#000000",
        fontWeight: "normal",
        rich: {
          a: {
            align: "center",
            fontSize: 14,
            lineHeight: 22
          },
          b: {
            align: "center",
            fontSize: 24,
            lineHeight: 34
          }
        }
      },
    }, {
      text: "{a|" + (parseInt(data[1].value) / (total == 0 ? 1 : total) * 100).toFixed(0) + "%}\n{b|" + data[1].value + "家}",
      left: "39%",
      top: "center",
      textStyle: {
        rich: {
          a: {
            width: 80,
            align: "center",
            lineHeight: 28,
            fontSize: 22,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          },
          b: {
            width: 80,
            align: "center",
            lineHeight: 18,
            fontSize: 14,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          }
        }
      }
    }, {
      text: "{a|" + (parseInt(data[2].value) / (total == 0 ? 1 : total) * 100).toFixed(0) + "%}\n{b|" + data[2].value + "家}",
      left: "56%",
      top: "center",
      textStyle: {
        rich: {
          a: {
            width: 80,
            align: "center",
            lineHeight: 28,
            fontSize: 22,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          },
          b: {
            width: 80,
            align: "center",
            lineHeight: 18,
            fontSize: 14,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          }
        }
      }
    }, {
      text: "{a|" + (parseInt(data[3].value) / (total == 0 ? 1 : total) * 100).toFixed(0) + "%}\n{b|" + data[3].value + "家}",
      left: "73%",
      top: "center",
      textStyle: {
        rich: {
          a: {
            width: 80,
            align: "center",
            lineHeight: 28,
            fontSize: 22,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          },
          b: {
            width: 80,
            align: "center",
            lineHeight: 18,
            fontSize: 14,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          }
        }
      }
    }, {
      text: "{a|" + (parseInt(data[4].value) / (total == 0 ? 1 : total) * 100).toFixed(0) + "%}\n{b|" + data[4].value + "家}",
      left: "90%",
      top: "center",
      textStyle: {
        rich: {
          a: {
            width: 80,
            align: "center",
            lineHeight: 28,
            fontSize: 22,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          },
          b: {
            width: 80,
            align: "center",
            lineHeight: 18,
            fontSize: 14,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          }
        }
      }
    }, {
      text: "{a|" + (parseInt(data[0].value) / (total == 0 ? 1 : total) * 100).toFixed(0) + "%}\n{b|" + data[0].value + "家}",
      left: "22%",
      top: "center",
      textStyle: {
        rich: {
          a: {
            width: 80,
            align: "center",
            lineHeight: 28,
            fontSize: 22,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          },
          b: {
            width: 80,
            align: "center",
            lineHeight: 18,
            fontSize: 14,
            fontWeight: 500,
            padding: [0, 0, 0, -45]
          }
        }
      }
    }],
    tooltip: {
      trigger: "item"
    },
    series: [{
      type: "pie",
      silent: true,
      center: ["22%", "50%"],
      radius: ["30%", "42%"],
      legendHoverLink: false,
      // stillShowZeroSum: false ,
      label: {
        show: false,
      },
      itemStyle: {
        color: function (params) {
          let colors = ["#3BAD4B", "#EEEEEE", "#EEEEEE", "#EEEEEE", "#EEEEEE"];
          return params.percent == 0 ? "#EEEEEE" : colors[params.dataIndex]
        }
      },
      data: data
    }, {
      type: "pie",
      silent: true,
      center: ["39%", "50%"],
      radius: ["30%", "42%"],
      legendHoverLink: false,
      label: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          let colors = ["#EEEEEE", "#1665D8", "#EEEEEE", "#EEEEEE", "#EEEEEE"];
          return params.percent == 0 ? "#EEEEEE" : colors[params.dataIndex]
        }
      },
      data: data
    }, {
      type: "pie",
      silent: true,
      center: ["56%", "50%"],
      radius: ["30%", "42%"],
      legendHoverLink: false,
      label: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          let colors = ["#EEEEEE", "#EEEEEE", "#18CBAF", "#EEEEEE", "#EEEEEE"];
          return params.percent == 0 ? "#EEEEEE" : colors[params.dataIndex]
        }
      },
      data: data
    }, {
      type: "pie",
      silent: true,
      center: ["73%", "50%"],
      radius: ["30%", "42%"],
      legendHoverLink: false,
      label: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          let colors = ["#EEEEEE", "#EEEEEE", "#EEEEEE", "#F6AB2E", "#EEEEEE"];
          return params.percent == 0 ? "#EEEEEE" : colors[params.dataIndex]
        }
      },
      data: data
    }, {
      type: "pie",
      silent: true,
      center: ["90%", "50%"],
      radius: ["30%", "42%"],
      legendHoverLink: false,
      label: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          let colors = ["#EEEEEE", "#EEEEEE", "#EEEEEE", "#EEEEEE", "#E0414A"];
          return params.percent == 0 ? "#EEEEEE" : colors[params.dataIndex]
        }
      },
      data: data
    }]
  });
  $("#gradeOption").append("<div class='gradeOption_legend'><span>AAA级</span><span>AA级</span><span>A级</span><span>B级</span><span>C级</span></div>");
  $(window).resize(myChart.resize);
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    myChart.resize();
  })
}

function GradeTrend() {
  let myChart = echarts.init(document.getElementById("gradeTrend"));
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "#D3E3FF"
        }
      },
      formatter: function (params) {
        let total = 0, str = '';
        params.forEach(function (item) {
          total += parseInt(item.value)
          str += "<br/><span class='marker' style='border-radius: 10px!important;background:" + item.color + "'></span>" + item.seriesName + "：" + item.value + "家"
        });
        return params[0].name + "年：共有" + total + "家" + str
      },
      padding: [10, 15],
      textStyle: {
        fontSize: 15
      }
    },
    legend: {
      data: ["AAA级", "AA级", "A级", "B级", "C级"],
      right: 30,
      top: 30,
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 25,
      textStyle: {
        fontSize: 15,
        padding: [0, 0, -3]
      }
    },
    grid: {
      left: 65,
      right: 30,
      top: 90,
      bottom: 50
    },
    xAxis: {
      value: "category",
      splitLine: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EAEDF3"
        }
      },
      axisLabel: {
        show: true,
        margin: 15,
        interval: 0,
        textStyle: {
          color: "#BABBC0",
          fontSize: 12,
        },
        formatter: "{value}年"
      },
      axisTick: {
        show: false
      },
      data: ["2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"],
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "5%"],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#BABBC0",
          fontSize: 12
        },
      },
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#EAEDF3"
        }
      }
    },
    color: ["#FFE121", "#F6AB2E", "#67B8FF", "#FED09C", "#E0414A"],
    series: [{
      name: "AAA级",
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      data: [270, 240, 320, 270, 320, 300, 435, 390, 450, 430]
    }, {
      name: "AA级",
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      data: [250, 220, 380, 250, 250, 280, 365, 370, 430, 410]
    }, {
      name: "A级",
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      data: [212, 230, 280, 233, 300, 289, 405, 306, 410, 380]
    }, {
      name: "B级",
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      data: [150, 120, 280, 150, 150, 180, 265, 270, 330, 310]
    }, {
      name: "C级",
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      data: [190, 200, 330, 200, 290, 230, 395, 400, 390, 390]
    }]
  });
  $(window).resize(myChart.resize);
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    myChart.resize();
  })
}

function GradeMap() {
  let data = [
    {name: '瑶海区', amount: 32399, percentage: "47%"},
    {name: '庐阳区', amount: 5923, percentage: "9%"},
    {name: '高新区', amount: 5923, percentage: "9%"},
    // {name: '蜀山区', amount: 1152, percentage: "2%"},
    // {name: '长丰县', amount: 1152, percentage: "2%"},
    // {name: '包河区', amount: 4299, percentage: "7%"},
    // {name: '肥东县', amount: 4252, percentage: "7%"},
    // {name: '肥西县', amount: 2229, percentage: "3%"},
    // {name: '庐江县', amount: 5352, percentage: "9%"},
    // {name: '巢湖市', amount: 300, percentage: "5%"}
  ];

  var geoCoordMap = ["蜀山区", "瑶海区", "庐阳区", "包河区", "肥东县", "巢湖市", "庐江县", "肥西县", "长丰县"];
  data.forEach(function (item) {
    geoCoordMap.forEach(function (value,index) {
      if(item.name==value){
        geoCoordMap.splice(index,1);
      }
    })
  });

  let mapData = [];
  data.forEach(function (item) {
    mapData.push({name: item.name, value: Math.round(item.percentage.replace("%", ""))})
  });
  geoCoordMap.forEach(function (item) {
    mapData.push({name:item,value:0})
  });
  let myChart = echarts.init(document.getElementById("gradeMap"));
  $.getJSON('hefei.json', function (geoJson) {
    echarts.registerMap('hefei', geoJson);
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          // console.log(params)
          return params.name + ": " + params.value + "%"
        }
      },
      visualMap: {
        show: true,
        min: 0,
        max: 100,
        right: 30,
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        formatter: "{value}%",
        inRange: {
          color: ['#FEFBEB', '#FEF5BC', '#FEED87', '#FEE75B', '#FEE030', '#FEE02B']
        }
      },
      geo: {
        show: true,
        map: 'hefei',
        top: 90,
        label: {
          show: false,
          emphasis: {
            show: false,
          }
        },
        roam: false,
      },
      series: [
        {
          name: '',
          type: 'map',
          map: 'hefei', // 自定义扩展图表类型
          top: 90,
          formatter: "{value}%",

          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#000000',
            formatter: function (params) {
              // console.log(params)
            },
          },
          itemStyle: {
            normal: {

            },
            emphasis: {label: {show: true}, color: '#fce15c'},
          },
          data: mapData
        }
      ]
    });
  });
  $(window).resize(myChart.resize);
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    myChart.resize();
  })
}

function EvaluateOption() {
  let myChart = echarts.init(document.getElementById("evaluateOption"));
  myChart.setOption({
    title: {
      text: "C级企业数",
      left: 20,
      top: 20,
      textStyle: {
        fontSize: 16,
        color: "#000000",
        fontWeight: "normal"
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "#D3E3FF"
        }
      },
      formatter: function (params) {
        return params[0].name + "年C级企业数" + params[0].value + "家"
      },
      padding: [10, 15],
      textStyle: {
        fontSize: 15
      }
    },
    grid: {
      left: 65,
      right: 30,
      top: 90,
      bottom: 50
    },
    xAxis: {
      value: "category",
      splitLine: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#EAEDF3"
        }
      },
      axisLabel: {
        show: true,
        margin: 15,
        interval: 0,
        textStyle: {
          color: "#BABBC0",
          fontSize: 12,
        },
        formatter: "{value}年"
      },
      axisTick: {
        show: false
      },
      data: ["2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"],
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "5%"],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#BABBC0",
          fontSize: 12
        },
        formatter: "{value}家"
      },
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#EAEDF3"
        }
      }
    },
    series: [{
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      itemStyle: {
        color: "#E0414A"
      },
      lineStyle: {
        color: "#E0414A",
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "rgba(224,65,74,0)"
        }, {
          offset: 1,
          color: "rgba(224,65,74,0.2)"
        }], false)
      },
      data: [42, 46, 39, 44, 32, 35, 28, 32, 24, 27]
    }]
  });
  $(window).resize(myChart.resize);
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    myChart.resize();
  })
}
